<template>
  <div class="meeting-list">
    <div class="search-condition">
      <div class="p-l-10 m-b-10">
        <el-input
          style="width: 300px"
          v-model="requestData.nickName"
          placeholder="请输入创建人"
          :suffix-icon="Search"
          size="large"
        />
        <el-input
          class="m-l-20"
          style="width: 300px"
          v-model="requestData.title"
          placeholder="请输入会议主题"
          :suffix-icon="Search"
          size="large"
        />
        <el-button size="large" class="m-l-20" plain @click="onDoSearch" type="primary">
          搜索
        </el-button>
        <el-button size="large" plain @click="onDoReset" type="primary">重置</el-button>
      </div>
      <div class="tag-row">
        <div class="tag-title">会议状态</div>
        <div class="tags">
          <div
            @click="onStateTagClick(index)"
            :class="{ 'tag-active': index === stateTagIndex }"
            v-for="(state, index) in meetingStateList"
            :key="index"
            class="tag c-p"
          >
            {{ state.label }}
          </div>
        </div>
      </div>
    </div>
    <div v-if="!isEmpty" class="intented-meeting-list">
      <div v-for="item in meetings" :key="item.id" class="card-box">
        <el-card>
          <template #header>
            <h3 class="ellipsis" :title="item.title">{{ item.title }}</h3>
          </template>
          <div class="card-inner">
            <div class="create-name m-b-10">
              <span class="color-gray">申请人：</span>
              <span>{{ item.nickName }}</span>
            </div>
            <div class="start-time m-b-10">
              <span class="color-gray">开始时间：</span>
              <span>{{ item.startTime }}</span>
            </div>
            <div class="end-time m-b-10">
              <span class="color-gray">结束时间：</span>
              <span>{{ item.endTime }}</span>
            </div>
            <!-- <div class="room-id m-b-10">
              <span class="color-gray">会议号：</span>
              <span>{{ item.meetingCode }}</span>
            </div> -->
            <div class="meeting-status m-b-10">
              <div>
                <span class="color-gray">会议状态：</span>
                <el-tag v-if="item.state === '未开始'" type="success">{{ item.state }}</el-tag>
                <el-tag v-if="item.state === '进行中'">{{ item.state }}</el-tag>
                <el-tag v-if="item.state === '已结束'" type="danger">{{ item.state }}</el-tag>
              </div>
              <el-button
                v-if="item.state === '进行中' || isReadyToStart(item.startTime)"
                size="small"
                @click="toMultiMeeting({ meetingNo: item.meetingCode })"
              >
                加入会议
              </el-button>
            </div>
            <div class="meeting-info">
              <span class="color-gray">会议介绍：</span>
              <span :title="item.info"> {{ item.info }} </span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <el-empty v-if="isEmpty" description="没有符合条件的数据" />
    <el-pagination
      v-if="!isEmpty"
      background
      class="m-t-10 m-b-10"
      style="justify-content: flex-end"
      :page-sizes="[6, 12, 24, 48]"
      layout="sizes, prev, pager, next"
      :total="total"
      :page-size="requestData.size"
      v-model:current-page="requestData.current"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { meetingList } from '@/api/video';
import { Search } from '@element-plus/icons-vue';
import { onMounted, reactive, ref } from 'vue';
import { meetingStateList } from '@/data/meetingState';
import { useRouter, type LocationQueryRaw } from 'vue-router';
import moment from 'moment';

// 分页
function handleSizeChange(val: number) {
  requestData.size = val;
  loadData();
}
function handleCurrentChange(val: number) {
  requestData.current = val;
  loadData();
}

// 在会议开始前10分钟也展示加入会议按钮
function isReadyToStart(startTime: string): boolean {
  const now = moment();
  const momentStartTime = moment(startTime);
  const diffMinutes = now.diff(momentStartTime, 'minutes');
  return diffMinutes <= 0 && diffMinutes >= -10;
}

// 加入会议
const router = useRouter();
const toMultiMeeting = (query?: LocationQueryRaw) => {
  const { href } = router.resolve({
    name: 'multiMeeting',
    query,
  });
  window.open(href, '_blank');
};

// 会议状态
const stateTagIndex = ref(0);
function onStateTagClick(index: number) {
  stateTagIndex.value = index;
  requestData.state = meetingStateList[index].value;
  loadData();
}

const requestData = reactive({
  current: 1,
  size: 6,
  nickName: '',
  title: '',
  state: '',
});
const meetings = ref<any[]>([]);
const total = ref<number>(0);
onMounted(() => {
  loadData();
});
const isEmpty = ref(false);
function loadData() {
  meetingList(requestData).then((res: any) => {
    if (res.code === 200) {
      meetings.value = res.data.records;
      total.value = res.data.total;
      if (res.data.total === 0) {
        isEmpty.value = true;
      } else {
        isEmpty.value = false;
      }
    }
  });
}

function onDoSearch() {
  loadData();
}
function onDoReset() {
  requestData.nickName = '';
  requestData.title = '';
  requestData.state = '';
  onDoSearch();
}
</script>

<style lang="scss" scoped>
.meeting-list {
  padding: 20px;
  .search-condition {
    .tag-row {
      display: flex;
      flex-wrap: wrap;
      .tag-title {
        width: 100px;
        flex-shrink: 0;
        text-align: center;
        padding: 5px;
      }
      .tags {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        .tag {
          padding: 5px;
          margin: 0 10px 0;
        }
        .tag-active {
          border: 2px solid #63b0ff;
          background-color: #ecf5ff;
        }
      }
    }
  }
  .intented-meeting-list {
    display: flex;
    flex-wrap: wrap;
    .card-box {
      width: 33%;
      padding: 10px 15px;
      .meeting-status {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .meeting-info {
        height: 3em;
        line-height: 1.4em;
        overflow: hidden; /* 隐藏溢出的内容 */
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 显示的最大行数 */
        -webkit-box-orient: vertical;
        text-overflow: ellipsis; /* 超出部分用省略号表示 */
      }
    }
  }
}
</style>
